<template>
  <div>
    <el-menu
      class="el-menu-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#fff"
      mode="horizontal"
      router
    >
      <el-row>
        <el-col :span="3">
          <el-menu-item :index="this.$store.state.user.roleName==='ADMIN'?'/admin/index':'/student/index'">
            课 程 平 台
          </el-menu-item>
        </el-col>
        <el-col :span="3"></el-col>
        <el-col :span="3" :offset="18">
          <el-submenu index="2">
            <template slot="title">
              <el-avatar :src="user.avatar" style="margin-right: 10px"></el-avatar>
              {{ this.user.nickname }}
            </template>
            <el-menu-item index="/details">
              <template slot="title">
                <i class="el-icon-setting"></i>
                个人资料
              </template>
            </el-menu-item>
            <el-menu-item @click="out">
              <template slot="title">
                <i class="el-icon-lock"></i>
                退出登录
              </template>
            </el-menu-item>
          </el-submenu>
        </el-col>
      </el-row>
    </el-menu>
    <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" router
    style="box-shadow: 0 5px 5px #ccc">
      <el-menu-item index="/student" v-if="this.$store.state.user.roleName === 'ADMIN'">
        <template slot="title">
          <i class="el-icon-finished"></i>
          学生管理
        </template>
      </el-menu-item>
      <el-menu-item index="/class" v-if="this.$store.state.user.roleName === 'ADMIN'">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          班级管理
        </template>
      </el-menu-item>
      <el-menu-item index="/resource" v-if="this.$store.state.user.roleName === 'ADMIN'">
        <template slot="title">
          <i class="el-icon-folder-add"></i>
          资源管理
        </template>
      </el-menu-item>
    </el-menu>
  </div>

</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      user: {
        nickname: '',
        avatar: '',
      }
    }
  },
  methods: {
    handleSelect () {
    },
    out () {
      this.$http({
        url: '/api/logout',
        method: 'post'
      }).then(res => {
        if (res.data.code === 200) {
          sessionStorage.clear()
          localStorage.clear()
          this.$store.state.user = {}
          this.$store.state.authorization = ''
          this.$router.push('/login')
        }
      })
    },
    init () {
      if (this.$store.state.user.avatar != null && this.$store.state.user.avatar !== '') {
        this.user.avatar = this.$host + this.$store.state.user.avatar
      } else {
        this.user.avatar = require('../assets/default.png')
      }

      if (this.$store.state.user.nickname != null && this.$store.state.user.nickname !== '') {
        this.user.nickname = this.$store.state.user.nickname
      } else {
        this.user.userNickname = '默认昵称'
      }
    }
  },
  computed: {
    changeAvatar () {
      return this.$store.state.user.avatar
    },
    changeNickname () {
      return this.$store.state.user.nickname
    },
  },
  watch: {
    changeAvatar () {
      this.user.avatar = this.$host + this.$store.state.user.avatar
    },
    changeNickname () {
      this.user.nickname = this.$store.state.user.nickname
    },
  },
  created () {
    this.init()
  }
}
</script>

<style scoped>

</style>
